<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>猫抓 M3U8解析器</title>
  <link rel="stylesheet" type="text/css" href="css/public.css" media="all" />
  <link rel="stylesheet" type="text/css" href="css/options.css" media="all" />
  <script src="lib/jquery.min.js"></script>
  <script src="js/init.js"></script>
  <script src="js/firefox.js"></script>
  <script src="lib/mux.min.js"></script>
  <script src="js/function.js"></script>
</head>

<body>
  <div class="m3u8_wrapper wrapper1080">

    <section id="loading">
      <div class="optionBox">
        文件载入中...
      </div>
    </section>

    <section id="m3u8Custom" class="hide">
      <h1 class="optionsTitle">猫抓 M3U8解析器</h1>
      <div class="optionBox">
        <span class="explain">请输入m3u8内容</span>
        <textarea rows="50" cols="160" id="m3u8Text" spellcheck="false" data-type="link" placeholder="输入m3u8内容 或 ts碎片列表"
          class="width100"></textarea>
        <input type="text" id="baseUrl" placeholder="BaseURL" class="fullInput" />
        <div class="line"></div>
        <span class="explain">或 输入m3u8的url</span>
        <input type="text" id="m3u8Url" placeholder="m3u8 URL" class="fullInput" />
        <div class="line"></div>
        <input type="text" id="referer" placeholder="请求头 Referer" class="fullInput" />
        <button id="parse" type="button">解析</button>
      </div>
    </section>

    <section id="more_m3u8" class="hide">
      <h1 class="optionsTitle">下一级文件</h1>
      <span class="explain">该m3u8文件中嵌套多个m3u8文件</span>
      <div class="optionBox">
        <div id="next_m3u8"></div>
      </div>
    </section>
    <section id="more_audio" class="hide">
      <h1 class="optionsTitle">多个音频</h1>
      <span class="explain">该m3u8文件中嵌套多个音频</span>
      <div class="optionBox">
        <div id="next_audio"></div>
      </div>
    </section>
    <section id="more_subtitle" class="hide">
      <h1 class="optionsTitle">多个字幕</h1>
      <span class="explain">该m3u8文件中嵌套多个字幕</span>
      <div class="optionBox">
        <div id="next_subtitle"></div>
      </div>
    </section>

    <section id="m3u8" class="hide">
      <h1 class="optionsTitle">猫抓 m3u8解析器</h1>
      <span class="explain" id="key"></span>
      <div class="optionBox">
        <div class="block">
          m3u8文件地址
          <p><a id="m3u8_url"></a></p>
        </div>

        <div class="block" id="tips"></div>
        <div class="block hide" id="maybeKey"><select class="m3u8Key select">
            <option value="tips">寻找到疑似密钥</option>
          </select></div>

        <div class="videoInfo flex">
          <div id="count"></div>
          <div id="info"></div>
        </div>
        <div class="block" id="textarea">
          <textarea rows="50" cols="169" id="media_file" spellcheck="false" data-type="link"
            class="width100">切片文件载入中....</textarea>
          <video id="video" class="hide" controls></video>
        </div>

        <div class="block" id="button">
          <div class="merge">
            <button id="downText">下载显示内容</button>
            <button id="originalM3U8">原始m3u8</button>
            <button id="localFile">本地m3u8</button>
            <button id="getTs">ts列表</button>
            <button id="tsAddArg">设置ts参数</button>
            <button id="play" data-switch="on">播放</button>
            <button id="m3u8DL" class="button2">调用m3u8DL下载</button>
            <button id="copyM3U8dl">复制命令</button>
            <button id="setM3u8dl">显示命令</button>
            <label class="m3u8checkbox textColor">载入设置参数<input type="checkbox" id="addParam" save="change" /></label>
            <button class="openDir hide">下载目录</button>
          </div>
          <textarea id="m3u8dlArg" type="text" class="m3u8dlArg hide"></textarea>
          <div class="line"></div>
          <div class="merge customKey">
            <input type="text" id="customFilename" spellcheck="false" placeholder="自定义 保存文件名" size="30" />
            <input type="text" id="customKey" spellcheck="false" placeholder="自定义 密钥 16进制 或 base64 或 密钥地址" size="60" />
            <input type="text" id="customIV" spellcheck="false" placeholder="自定义 偏移量 IV" size="30" />
            <button id="uploadKey">上传Key</button>
            <input id="uploadKeyFile" type="file" class="hide" />
          </div>
          <div class="merge" id="mergeDown">
            <div id="threadDiv" class="textColor">下载线程 <input type="number" value="32" id="thread" spellcheck="false"
                style="width: 35px;" step="1" min="1" max="256" save="change" /></div>
            <label class="m3u8checkbox textColor">ffmpeg转码<input type="checkbox" id="ffmpeg" save="change" /></label>
            <label class="m3u8checkbox textColor">mp4格式<input type="checkbox" id="mp4" save="change" /></label>
            <label class="m3u8checkbox textColor firefoxHide">边下边存<input type="checkbox" id="StreamSaver"
                save="change" /></label>
            <label class="m3u8checkbox textColor">只要音频<input type="checkbox" id="onlyAudio" save="change" /></label>
            <label class="m3u8checkbox textColor">另存为<input type="checkbox" id="saveAs" save="change" /></label>
            <label class="m3u8checkbox textColor">跳过解密<input type="checkbox" id="skipDecrypt" save="change" /></label>
            <label class="m3u8checkbox textColor">测试<input type="checkbox" id="test" save="change" /></label>
            <div class="rangeDown textColor">
              下载范围
              <div class="merge">
                <input type="text" id="rangeStart" spellcheck="false" placeholder="开始" />
                <input type="text" id="rangeEnd" spellcheck="false" placeholder="结束" />
              </div>
            </div>
            <button id="recorder" class="button2 hide" data-switch="on" data-switch="on">录制直播</button>
            <button id="mergeTs" class="button2">合并下载</button>
            <button id="errorDownload" class="hide button2">重下失败项</button>
            <button id="ForceDownload" class="hide button2">下载已有数据</button>
            <button id="stopStream" class="hide button2">停止下载</button>
          </div>
          <div style="display: flex; margin-top: 10px;">
            <div id="progress"></div>
            <div id="fileSize"></div>
            <div id="fileDuration"></div>
          </div>
          <div class="block hide" id="errorTsList"></div>
        </div>

      </div>
    </section>
  </div>
  <script src="lib/m3u8-decrypt.js"></script>
  <script src="lib/hls.min.js"></script>
  <script src="lib/base64.js"></script>
  <script src="lib/StreamSaver.js"></script>
  <script src="js/m3u8.downloader.js"></script>
  <script src="js/m3u8.js"></script>
</body>

</html>